<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle">
    <el-form ref="formRef" :model="formData" :rules="formRules">
      <el-form-item label="规则内容" prop="content">
        <el-button @click="addContent('^')">开头</el-button>
        <el-button @click="addContent('$')">结尾</el-button>
        <el-button @click="addContent('{num}')">字符数</el-button>
        <el-button @click="addContent('{min,max}')">出现次数</el-button>
        <el-button @click="addContent('(19|20)\d{2}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])')"
          >日期</el-button
        >
        <el-button @click="addContent('(?=.*关键词)')">关键词</el-button>
      </el-form-item>
      <el-form-item label="规则内容" prop="content">
        <ns-input
          v-model="formData.content"
          type="textarea"
          :rows="4"
          placeholder="请输入规则内容"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题

const formData = ref({
  content: ''
})

const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = '规则生成'
  resetForm()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    content: ''
  }
  formRef.value?.resetFields()
}

const addContent = (val) => {
  formData.value.content += val
}
</script>
